<template>
    <div id="assemblyIntegration">
        <!-- 主类选择 -->
        <div class="left" v-if="pageFormInline.length > 0">
           <el-select v-model="mainClassType" placeholder="请选择筛选主类" @change="handlechange" class="selectType">
                <el-option
                v-for="item in pageFormInline"
                :key="item.value"
                :label="item.label"
                :value="item">
                </el-option>
            </el-select>
            <el-input v-if="mainClassType.type=='input'" v-model="inputValue" placeholder="请输入内容" class="inputType"></el-input>
            <el-select style="width:160px" v-if="mainClassType.type=='select'&&mainClassType.hasGroup" clearable v-show="!mainClassType.hide" v-model="inputValue" placeholder="请选择">
                <el-option-group   v-for="(group,idx) in mainClassType.options" :key="idx" :label="group[mainClassType.defaultProp&&mainClassType.defaultProp.length?mainClassType.defaultProp[1]:'name']">
                    <el-option v-for="(ele,ind) in group[mainClassType.defaultProp&&mainClassType.defaultProp.length?mainClassType.defaultProp[2]:'children']" :key="ind" :label="ele[mainClassType.defaultProp&&mainClassType.defaultProp.length?mainClassType.defaultProp[1]:'name']" 
                    :value="ele[mainClassType.defaultProp&&mainClassType.defaultProp.length?mainClassType.defaultProp[0]:'id']">
                </el-option>
                </el-option-group>
            </el-select>
            <el-select style="width:160px" v-if="mainClassType.type=='select'&&(!mainClassType.hasGroup)" v-show="!mainClassType.hide" clearable v-model="inputValue" placeholder="请选择">
                <el-option  v-for="(ele,ind) in mainClassType.options" :key="ind" :label="ele[mainClassType.defaultProp&&mainClassType.defaultProp.length?mainClassType.defaultProp[1]:'name']" 
                    :value="ele[mainClassType.defaultProp&&mainClassType.defaultProp.length?mainClassType.defaultProp[0]:'id']">
                </el-option>
            </el-select>
            <el-input style="width:160px" readonly ref="showPeople" v-if="mainClassType.type=='people'" v-model="inputValue" :placeholder="mainClassType.placeholder||'请输入'" @focus.stop="showPeople(mainClassType.value,'showPeople');" class="inputType">
                <i class="el-icon-arrow-down" slot="suffix" width='25px' style="margin:7px 5px 0 0"></i>
            </el-input>
            <el-input style="width:160px" readonly ref="showDept" v-if="mainClassType.type=='dept'" v-model="inputValue" :placeholder="mainClassType.placeholder||'请输入'" @focus.stop="showDept(mainClassType.value,'showDept');" class="inputType">
                <i class="el-icon-arrow-down" slot="suffix" width='25px' style="margin:7px 5px 0 0"></i>
            </el-input>
            <el-date-picker v-show="!mainClassType.hide" style="width:350px" v-if="mainClassType.type=='daterange'" v-model="inputValue" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="pickerType"></el-date-picker>
            <el-select style="width:160px" v-if="mainClassType.type=='selectTree'" v-show="!mainClassType.hide" clearable v-model="inputValue" placeholder="请选择">
                <el-option class="newOption" ref="optionTree" :label="mainClassType.name" :value="inputValue" >
                <el-tree :data="mainClassType.options"  :props="mainClassType.treeProp" accordion @node-click="handleNodeClick($event,index,mainClassType.value)">
                </el-tree>
                </el-option>
            </el-select>
            <el-button plain icon="el-icon-search" class="btnType" @click="selectConfirm" style="margin-right:0;padding:0 15px"></el-button>
            <el-button plain class="btnType" @click="reset">重置</el-button>
        </div>
        <el-button plain class="btnItem" v-for="(item,index) in pageBtnList" :disabled="!item.status" :key="'btn'+index" @click="btnListClick(item)">{{item.label}}</el-button>
    </div>
</template>

<script>
    import {complexPicker,departmentsPicker} from "@/libs/utils" /**封装选部门方法 */
    export default {
        props:{
           formInline:{
               type:Array,
               default:()=>{return []}
           },
           btnList:{
               type:Array,
               default:()=>{return []}
           }
        },
        watch:{
            formInline(newData){
              this.pageFormInline =newData
            },
            btnList(newData){
              this.pageBtnList =newData
            }
        },
        created(){
           if(this.formInline.length > 0){
              this.mainClassType = this.formInline[0]
              this.pageFormInline =this.formInline
           }
           this.pageBtnList = this.btnList
        },
        data(){
            return {
                mainClassType:{},
                inputValue:'',
                pageBtnList:[],
                pageFormInline:[],
                people_ids:'',
                peopleArr:[],
                deptIds:'',
                deptArr:[]
            }
        },
        methods:{
            reset(){
               this.inputValue = ''
               this.peopleArr = []
               this.deptArr = []
               this.selectConfirm()
            },
            handlechange(){
                console.log(this.mainClassType,'mainClassType')
            },
            selectConfirm(){
                this.$emit('search',{[this.mainClassType.value]:this.inputValue},this.peopleArr,this.deptArr)
            },
            btnListClick(item){
                this.$emit('btnListClick',item)
            },
            /**选负责人 */
            showPeople(value){
                this.$refs.showPeople?this.$refs.showPeople[0].blur():''
                let that = this
                complexPicker(that,{bool:true,useridArr:that.people_ids?that.people_ids.split(','):[]},function(res){
                    that.form[value] = res.userArr
                    that.people_ids=res.user_id
                    that.peopleArr = res.users
                })
            },
            /*下拉树结构点击选中当前option*/
            handleNodeClick(node,i,value){
                this.$refs.optionTree[0].$el.click()
                this.form[value] = node.name
            },
            /**选部门 */
            showDept(value){
                this.$refs.showDept?this.$refs.showDept[0].blur():''
                let that = this
                departmentsPicker(that,{pickedDepartments:that.deptIds?that.deptIds.split(','):[]},function(res){
                    that.form[value] = res.deptArr
                    that.deptIds=res.dept_id
                    that.deptArr = res.departments
                })
            },
        }
    }
</script>

<style lang="scss">
#assemblyIntegration{
    margin: 0px 0 10px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .left{
        width: auto;
        height: 30px;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
    }
    .el-input--small .el-input__inner{
        border-radius: 0px !important;
        height: 30px !important;
        line-height: 31px !important;
    }
    .selectType{
        width: 130px !important;
        .el-input--small .el-input__icon{
            line-height: 29px;
        }
        .el-input{
            width: 130px !important;
        }
    }
    .inputType{
        width: 180px !important;
    }
    .btnType{
        height: 30px !important;
        padding: 0 10px;
        line-height: 30px !important;
        border-radius: 0px !important;
        margin-right: 7px;
        margin-left: 0px;
        font-size: 12px !important;
    }
    .pickerType{
        height: 30px !important;
        border-radius: 0px !important;
        width: 250px !important;
    }
    .btnItem{
        width: auto;
        margin-right: 7px;
        margin-left: 0px;
        padding: 0 10px !important;
        height: 30px !important;
        line-height: 30px !important;
        color: rgba(96, 98, 102, 1);
        font-size: 12px;
        margin-bottom: 10px;
    }
}
</style>